<template>
  <div :class="['layout',{...layoutClass}]">
      <slot></slot>
  </div>
</template>

<script>
export default {
  name:'LmLayout',
  props: {

  },
  components: {

  },
  data() {
    return {
        layoutClass:{
            hasSider:false
        }
    };
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {
    let children = this.$children
    // 查看子组件中 是否有 sider
    this.$children.forEach(item =>{
        if(item.$options.name === "LmSider"){
            this.$set(this.layoutClass, 'hasSider', true)
        }
    })

  },
  methods: {

  },
};
</script>

<style lang='scss' scoped>
.layout{
    flex-grow: 1;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    &.hasSider{
        flex-direction: row;
    }
}
</style>
